<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>搜索引擎</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">  
	<link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/licenseList.css" />
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        window.onload = function(){

        };
    </script>
</head>
<body style="background-color:#FFF">
    <!--导航栏-->
	<div class="row box" style="background-color:#000; font-size:16px">
        <div class="" id="myNavbar" style="min-height:81px;">
            <img src="images/icon/logo.png" width=52px height=52px class="img-circle nav navbar-nav" 
            style="margin-left:12vw;transform: translateY(14px);">
            <ul class="nav navbar-nav sethover" style="text-align:center; margin-right:60px" >
                <li class="active dropdown"><a href="index.html">首页</a></li>
                <li class="active dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">开源资源</a>
                    <ul class="dropdown-menu">
                        <li><a href="opensource_software.html">开源软件</a></li>
                        <li><a href="open_source_license.html">开源许可证</a></li>
                        <li><a href="open_source_works.html">开源作品</a></li>
                        <li><a href="open_source_license.html">开源许可证</a></li>
                        <li><a href="open_source_works.html">开源作品</a></li>
                    </ul>
                </li>
                <li class="active dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">开源资源</a>
                    <ul class="dropdown-menu">
                        <li><a href="opensource_software.html">开源软件</a></li>
                        <li><a href="open_source_license.html">开源许可证</a></li>
                        <li><a href="open_source_works.html">开源作品</a></li>
                        <li><a href="open_source_license.html">开源许可证</a></li>
                        <li><a href="open_source_works.html">开源作品</a></li>
                    </ul>  
                </li>
                <li class="active dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">许可证工具</a>
                    <ul class="dropdown-menu">
                        <li><a href="search_engine.html">搜索引擎</a></li>
                        <li><a href="the_selector.html">选择器</a></li>
                    </ul>
                </li>
                <li class="active dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">关于我们</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">开源新资讯</a></li>
                        <li><a href="#">许可证维度</a></li>
                        <li><a href="#">许可证生成</a></li>
                    </ul>
                </li>
    		<!--    <li id="search" class="panel-collapse collapse" style="margin-left:400px;"><a>123132</span></a></li>-->
            </ul>
            <ul class="nav navbar-nav">
            <input type="text" placeholder="请输入内容" class="form-control" style="display:inline; margin:25px 0 0 35px; width:120px">
            <button style=" margin:0 30px 0 0; background-color:transparent;color:#999;border:0;" href="#"> 
                <span class="glyphicon glyphicon-search search-icon"></span>
            </button>
            <div style="display:inline-block; width:150px">
            <a href="#" class="login" id="login-admin">管理员</a>
            <span style="padding:0 5px 0 5px">●</span>
            <a href="#" class="login" id="login-common">普通用户</a>
            </div>
        </div>
	</div>
	<div class="container" id="app"> 
    	<div class="mask"> </div>  	
		<div class="row" style="display: flex;flex-direction: column;justify-content: center;align-items:center;">
            <div class="row second-title text-align-center">
                <p><span>许可证列表</span></p>
            </div>
            <div id="search" class="searchBorder" v-bind:class="{searchHover: isHover}" @click="Choose">
            	<div style="width: 90%">&nbsp;&nbsp;按条件选择许可证</div>
				<div style="border-left: 1px #b9b9b9 solid;padding:0 7px 0 7px">
					<span class="glyphicon glyphicon-search"></span>
				</div>    
			</div>
            <div style="height: 30px;margin-bottom: 10px;line-height: 30px">
                已选择条件：
               <div class="second-line" style="background-color: #51cb60" v-for="item in checkedRights">
                    {{item}}
                </div>
                <div class="second-line" style="background-color: #e2c14b" v-for="item in checkedObligations">
                    {{item}}
                </div>
                <div class="second-line" style="background-color: #e85f5f" v-for="item in checkedProhibition">
                    {{item}}
                </div>
                <button class="btn btn-1 btn-1e" @click="deleteAll">清空</button>
            </div>
            <div id="all">
                <div class="column">
                    <div class="license" v-for="(item, index) in colLicense1"  @mouseenter="mouseOverCol1(index)" @mouseleave="col1=-1" >
                    <div class="first-line">
                        <a class="license-name"> {{item.name}} </a>
                        <div style="display: inline-block;" v-bind:class="{ active: index === col1 }">
                            <span class="glyphicon glyphicon-comment" style="padding-right:8px">
                            </span>{{item.comments}}
                        </div>
                    </div>
                    <div>
                        <div class="second-line" style="background-color: #51cb60" v-show="index !== col1">
                            {{item.right.length}}条规则
                        </div>
                        <div class="second-line" style="background-color: #51cb60" v-for="right in item.right" v-show="index == col1">
                            {{right}}
                        </div>
                        <div class="second-line" style="background-color: #e2c14b" v-show="index !== col1">
                            {{item.right.length}}条规则
                        </div>
                        <div class="second-line" style="background-color: #e2c14b" v-for="obligation in item.obligation" v-show="index == col1">
                            {{obligation}}
                        </div>
                        <div class="second-line" style="background-color: #e85f5f" v-show="index !== col1">
                            {{item.prohibition.length}}条规则
                        </div>
                        <div class="second-line" style="background-color: #e85f5f" v-for="prohibition in item.prohibition" v-show="index == col1">
                            {{prohibition}}
                        </div>
                    </div>
                </div>
                </div>
                <div class="column">
                    <div class="license" v-for="(item, index) in colLicense2"  @mouseenter="mouseOverCol2(index)" @mouseleave="col2=-1" >
                    <div class="first-line">
                        <a class="license-name"> {{item.name}} </a>
                        <div style="display: inline-block;" v-bind:class="{ active: index === col2 }">
                            <span class="glyphicon glyphicon-comment" style="padding-right:8px">
                            </span>{{item.comments}}
                        </div>
                    </div>
                    <div>
                        <div class="second-line" style="background-color: #51cb60" v-show="index !== col2">
                            {{item.right.length}}条规则
                        </div>
                        <div class="second-line" style="background-color: #51cb60" v-for="right in item.right" v-show="index == col2">
                            {{right}}
                        </div>
                        <div class="second-line" style="background-color: #e2c14b" v-show="index !== col2">
                            {{item.right.length}}条规则
                        </div>
                        <div class="second-line" style="background-color: #e2c14b" v-for="obligation in item.obligation" v-show="index == col2">
                            {{obligation}}
                        </div>
                        <div class="second-line" style="background-color: #e85f5f" v-show="index !== col2">
                            {{item.prohibition.length}}条规则
                        </div>
                        <div class="second-line" style="background-color: #e85f5f" v-for="prohibition in item.prohibition" v-show="index == col2">
                            {{prohibition}}
                        </div>
                    </div>
                </div>
                </div>
                <div class="column">
                    <div class="license" v-for="(item, index) in colLicense3"  @mouseenter="mouseOverCol3(index)" @mouseleave="col3=-1" >
                    <div class="first-line">
                        <a class="license-name"> {{item.name}} </a>
                        <div style="display: inline-block;" v-bind:class="{ active: index === col3 }">
                            <span class="glyphicon glyphicon-comment" style="padding-right:8px">
                            </span>{{item.comments}}
                        </div>
                    </div>
                    <div>
                        <div class="second-line" style="background-color: #51cb60" v-show="index !== col3">
                            {{item.right.length}}条规则
                        </div>
                        <div class="second-line" style="background-color: #51cb60" v-for="right in item.right" v-show="index == col3">
                            {{right}}
                        </div>
                        <div class="second-line" style="background-color: #e2c14b" v-show="index !== col3">
                            {{item.right.length}}条规则
                        </div>
                        <div class="second-line" style="background-color: #e2c14b" v-for="obligation in item.obligation" v-show="index == col3">
                            {{obligation}}
                        </div>
                        <div class="second-line" style="background-color: #e85f5f" v-show="index !== col3">
                            {{item.prohibition.length}}条规则
                        </div>
                        <div class="second-line" style="background-color: #e85f5f" v-for="prohibition in item.prohibition" v-show="index == col3">
                            {{prohibition}}
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>

        <!--选择条件框-->
        <div id="choose" v-show="showChoose == true">
            <div id="first-part">
                <p>请选择许可证特性 </p>
            </div>
            <div id="second-part">
                <div class="choose-part">
                    <div class="choose-title" style="background-color: #51cb60">权利</div>
                    <ul class="forth-title" style="padding-left: 10px">
                        <form style="justify-content: flex-start;">
                            <p><label class="checkbox-inline"><input type="checkbox" value="出售" v-model="checkedRights">出售</label></p> 
                            <p><label class="checkbox-inline"><input type="checkbox" value="分发" v-model="checkedRights">分发</label></p>
                            <p><label class="checkbox-inline"><input type="checkbox" value="可读" v-model="checkedRights">可读</label></p>
                            <p><label class="checkbox-inline"><input type="checkbox" value="商业" v-model="checkedRights">商业</label></p>
                            <p><label class="checkbox-inline"><input type="checkbox" value="衍生" v-model="checkedRights">衍生</label></p>
                            <p><label class="checkbox-inline"><input type="checkbox" value="再复制" v-model="checkedRights">再复制</label></p>  
                        </form>
                    </ul>
                </div>
                <div class="choose-part">
                    <div class="choose-title" style="background-color: #e2c14b">义务</div>
                    <ul class="forth-title" style="padding-left: 10px">
                        <form>
                            <p><label class="checkbox-inline"><input type="checkbox" value="附加源" v-model="checkedObligations">附加源</label></p>
                            <p><label class="checkbox-inline"><input type="checkbox" value="附加政策" v-model="checkedObligations">附加政策</label></p>
                            <p><label class="checkbox-inline"><input type="checkbox" value="特性" v-model="checkedObligations">特性</label></p>
                            <p><label class="checkbox-inline"><input type="checkbox" value="相同授权条款" v-model="checkedObligations">相同授权条款</label></p>
                        </form>
                    </ul>
                </div>
                <div class="choose-part">
                    <div class="choose-title" style="background-color: #e85f5f">禁止</div>
                    <ul class="forth-title" style="padding-left: 10px">
                        <form>
                            <p><label class="checkbox-inline"><input type="checkbox" value="分发" v-model="checkedProhibition">分发</label></p>
                            <p><label class="checkbox-inline"><input type="checkbox" value="商业" v-model="checkedProhibition">商业</label></p>
                            <p><label class="checkbox-inline"><input type="checkbox" value="衍生" v-model="checkedProhibition">衍生</label></p>   
                        </form>
                    </ul>
                </div>
            </div>
            <div id="third-part">
                <div style="height: 30px;margin-bottom: 10px;line-height: 30px">
                    <button class="btn btn-1 btn-1e" @click="deleteAll">清空</button>
                    已选择：
                   <div class="second-line" style="background-color: #51cb60" v-for="item in checkedRights">
                        {{item}}
                    </div>
                    <div class="second-line" style="background-color: #e2c14b" v-for="item in checkedObligations">
                        {{item}}
                    </div>
                    <div class="second-line" style="background-color: #e85f5f" v-for="item in checkedProhibition">
                        {{item}}
                    </div>
                </div>
                <div id="forth-part">
                    <button class="btn btn-1 btn-1e" @click="search">搜索</button>
                    <button class="btn btn-1 btn-1e" @click="cancelChoose">取消</button>
                </div>
            </div>
        </div>
	</div>

    <!--下载栏-->
    <div id="download-list" tabindex="0">
    	<div class="second-title color-white text-align-center" style="width:350px;">
            <span style="margin-left:60px;margin-right:50px;">下载列表</span>
            <a id="download-out"><span class="glyphicon glyphicon-log-out" style="top:4px"></span></a>
        </div>
        <table class="third-title color-white download-table" style="width:330px;margin-left: 20px">
            <tr>
                <td style="width: 85%"></td>
                <td style="width: 15%"></td>
            </tr>
            <tr>
                <td><span>1、下载列表</span></td>
                <td><a  class="forth-title"><span>删除</span></a></td>
            </tr>
            <tr>
                <td><span>2、下载列表asdasd</span></td>
                <td><a  class="forth-title"><span>删除</span></a></td>
            </tr>
            <tr>
                <td><span>3、下载列表asdasdasd</span></td>
                <td><a  class="forth-title"><span>删除</span></a></td>
            </tr>
        </table>
        <div class="second-title color-white text-align-center" style="width:350px;bottom:0;position: fixed">
            <table class="third-title color-white"  style="width:330px;margin-left: 20px">
                <tr>
                    <td><a><span>上一页</span></a></td>
                    <td class="second-title"><a><span>下载</span></a></td>
                    <td><a><span>下一页</span></a></td>
                </tr>
            </table>
        </div>
    </div>

    <!--登录注册-->
    <div id="login-table">  
        <div class="third-title color-white" style="background-color:#000;color:#fff;">
            <span style="margin-left: 20px" id="login-type">管理员登录</span>
            <a class="login-close">
                <span class="glyphicon glyphicon-remove-circle" style="float: right;top:16px;right: 16px">
                </span>
            </a>
        </div>
        <table style=" margin-left: 30px; margin-top: 10px" class="forth-title">
            <tbody>
            <tr>
                    <td style="width: 15%"></td>
                    <td style="width: 80px">登录名：</td>
                    <td><input type="text" value="loginName" placeholder="请输入登录名"  maxlength="10" 
                        style="width: 120px;"></td>
                    <td></td>
            </tr>
             <tr>
                    <td></td>
                    <td>密码：</td>
                    <td><input type="password" value="loginPassword" placeholder="请输入密码" 
                        maxlength="16" style="width: 120px;"></td>
                    <td></td>
            </tr>
             <tr>
                    <td></td>
                    <td>验证码：</td>
                    <td><input type="text" value="code" placeholder="空" maxlength="4" style="width: 50px;"></td>
                    <td id="codeImg"></td>
            </tr>                        
       
            <div class="third-title">
                <a id="login-button"><span style="margin-left: 30%">登录</span></a>
                <a id="register-button" class="fifth-title"><span style="margin-left: 40px">点击注册</span></a>
            </div>
            </tbody> 
        </table>
    </div>

    <!--页脚-->
	<div class="otherfoot">
    	<a id="open-download">
            <div id = "download-button" class="shadow second-title">
                <span class="glyphicon glyphicon-download-alt"></span>
            </div>
        </a>
		<img src="images/icon/logo.png" width=60px height=60px class="img-circle" style="margin-left:20vw; border:0;">
		<div class="othercopyright">
			Copyright &copy; 西南大学<a href="http://www.swu.edu.cn/" target="_blank" title="西南大学">www.swu.edu.cn</a>       
		</div> 
	</div>
</body>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
	<script type="text/javascript" src="js/choose.js"></script>
    <script type="text/javascript" src="js/classie.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
        var lin = [];
		var app = new Vue({
			el: '#app',
			data: {
                position :[-1,-1,-1],
                col1 : -1,
                col2 : -1,
                col3 : -1,
                colLicense1 : [],
                colLicense2 : [],
                colLicense3 : [],
                checkedRights :[],
                checkedProhibition : [],
                checkedObligations : [],
                showChoose: false ,
                isHover : false,
                chooseBorder:"border: 1px #b9b9b9 solid;",
				licenses : [],
				'hideLicense' : []
			},
			methods:{
	        	mouseOverCol1 (index){
                    this.col1= index;
                    // console.log(this.col1);
                },
                mouseOverCol2 (index){
                    this.col2 = index;
                },
                mouseOverCol3 (index){
                    this.col3 = index;
                },
                Choose(){
                    this.showChoose = true;
                },
                search :function(){
                    this.showChoose = false;
                    this.getData("/opensource/license/searchEngine",{
                                "rights":this.checkedRights.toString(),
                                "obligations":this.checkedObligations.toString(),
                                "prohibition":this.checkedProhibition.toString()
                            });
                },
                cancelChoose(){
                    this.checkedRights = [];
                    this.checkedProhibition = [];
                    this.checkedObligations = [];
                    this.showChoose = false;
                },
                deleteAll(){
                    this.checkedRights=[];
                    this.checkedProhibition=[];
                    this.checkedObligations=[];
                    this.getData("/opensource/license/showAllLicenses","");
                },
                getData(url,data){
                    let that = this;
                    $.post(url,data,
                        function(data){
                            that.licenses=[];
                            that.colLicense1=[];
                            that.colLicense2=[];
                            that.colLicense3=[];
                            that.licenses=jsontoArray(data);
                            // console.log("this.licenses:"+that.licenses);
                            // console.log("this.-right:"+that.licenses[0].right);
                            for(let i=0;i<that.licenses.length;i++)
                            {
                                let temp = i%3;
                                switch(temp)
                                {
                                    case 0:
                                        // console.log("0");
                                        that.colLicense1.push(that.licenses[i]);
                                        break;
                                    case 1:
                                        // console.log("1");
                                        that.colLicense2.push(that.licenses[i]);
                                        break;
                                    case 2:
                                        // console.log("2");
                                        that.colLicense3.push(that.licenses[i]);
                                        break;
                                }
                            }
                            let x = 3-that.licenses.length%3;
                            if(x==3){
                                x = 0;
                            }
                            // console.log("x:"+x)
                            let index = 0;
                            while(x>0)
                            {
                                that.hideLicense[index] = {
                                    "name":"许可证12",
                                };
                                // console.log(index+":"+that.hideLicense[index]);
                                x--;
                                index++;
                            }
                        });
                }
	        },
			mounted:function(){
			    let that = this;
                this.getData("/opensource/license/showAllLicenses","");
				console.log("mounted");

			},
            updated(){

            }
		});
    function jsontoArray(str){
        const obj = JSON.parse(str);
        const result = [];
        for(let key in obj) {
            let temp = {
                'name' : obj[key].name,
                'right' : obj[key].right.split(","),
                'obligation' : obj[key].obligation.split(","),
                'prohibition' : obj[key].prohibition.split(","),
                'comments' : obj[key].comments,
            }
            result.push(temp);
        }
        return result;
    }
    </script>>
</html>
